<script setup>
import { Delete, EditPen, Warning } from '@element-plus/icons-vue'
import { useStudentStore } from '@/store/super-manger/studentStore';
import { storeToRefs } from 'pinia';
import { formatTime } from '@/utils/formatTime'
import { delStudentInfoApi, updateBedNumberApi } from '@/service/student'
import { showElMessage } from '@/utils/showTipMessage'
import { useCommonStore } from '@/store/commonStore'
import eventBus from '@/utils/eventBus.js'
import { getDorIdApi } from "@/service/dormitory"

const { 
    isShowTipInfo, 
    tipInfoContent,
    oplationType,
    oplationId
} = storeToRefs(useCommonStore());

const studentStore = useStudentStore();
const { 
  tableData, 
  dorId, 
  bedId, 
  isRetreat, 
  sno,
  isShowStudentPanel, 
  panelTitle, 
  openPanelType 
} = storeToRefs(studentStore);

const tableHeaderStyle = {  // 表头样式
  background: '#f5f7f6',
  height: '50px'
}

// 删除
const delBtnClick = async(row) => {
  const { name, sno, building, room_name, bed_number } = row;
  // 发送网络请求获取宿舍的id
  const res = await getDorIdApi(building, room_name);
  const { code, id } = res.data;
  // 提示信息
  if (code) {
    dorId.value = id;
    bedId.value = bed_number;
    isShowTipInfo.value = true;
    tipInfoContent.value = `是否删除学生 ${name} 的信息记录？`;
    oplationType.value = 'delete';
    oplationId.value = sno;
  } 
}

eventBus.on("deleteBtnClick", async function() {
    // 根据学号发送网络请求删除数据
    const res = await delStudentInfoApi(oplationId.value);
    const { code } = res.data;
    if (code) { // 表示删除成功
      // 发送网络请求修改宿舍空余床位信息
      await updateBedNumberApi(bedId.value, dorId.value, 'delete');
      showElMessage('学生信息删除成功');
    }
})

// 床位号处理
function handleBedNumber(bedNumber) {
  return bedNumber.split('_')[1] + ' 号床';
}

// 退宿按钮点击
const retreatBtnClick = (id) => {
  // 发送网络请求修改状态值
  isRetreat.value = true;
  sno.value = id;
}

// 编辑
const editBtnClick = (stuId) => {
  sno.value = stuId;
  isShowStudentPanel.value = true;
  panelTitle.value = '编辑';
  openPanelType.value = 'edit';  // 打开面板的类型
}


</script>

<template>
  <div class="table">
    <!-- 表格展示 -->
    <el-table 
        :data="tableData" 
        style="width: 100%"
        border
        :header-cell-style="tableHeaderStyle"
        empty-text="暂无数据"
    >
        <el-table-column type="index" label="序号" width="60"  fixed="left" />
        <el-table-column prop="sno" label="学号" width="180" />
        <el-table-column prop="name" label="姓名" width="180" />
        <el-table-column prop="gender" label="性别" width="60" />
        <el-table-column prop="grade" label="年级" width="80" />
        <el-table-column prop="class" label="班级" width="180" />
        <el-table-column label="宿舍楼" width="180">
            <template #default="scoped">
                <span>{{ scoped.row.building }} 号楼</span>
            </template>
        </el-table-column>
        <el-table-column prop="room_name" label="宿舍号" width="180" />
        <el-table-column prop="bed_number" label="床位号" width="80">
          <template #default="scoped">
            <span>{{ handleBedNumber(scoped.row.bed_number) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="telephone" label="手机号" width="180" />
        <el-table-column prop="checkIn_time" label="入住时间" width="180">
          <template #default="scoped">
            <span>{{ formatTime(scoped.row.checkIn_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scoped">
            <el-tag 
              class="ml-2" 
              :type="Number(scoped.row.status) ? 'success': 'danger'"
            >
            {{ Number(scoped.row.status) ? '居住中': '已退宿' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" fixed="right">
            <template #default="prop">
              <el-button 
                type="warning" 
                size="small" 
                plain
                @click="retreatBtnClick(prop.row.sno)"  
                :disabled="Number(prop.row.status) === 0"
              >
                  <el-icon><Warning/></el-icon>
                  退宿
              </el-button>
              <el-button 
                type="info" 
                size="small" 
                plain
                @click="editBtnClick(prop.row.sno)"  
                :disabled="Number(prop.row.status) === 0"
              >
                  <el-icon><EditPen/></el-icon>
                  编辑
              </el-button>
              <el-button 
                type="danger" 
                size="small" 
                plain
                @click="delBtnClick(prop.row)"  
                :disabled="Number(prop.row.status) !== 0"
              >
                  <el-icon><Delete/></el-icon>
                  删除
              </el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>

</style>